<template>
    <div class="le">
        <div class="header">环境检测</div>
        <div class="body">
            <div class="block_8 flex-row">
                <span class="text_64">℃</span>
                <div class="block_9 flex-col justify-between">
                    <div class="text-wrapper_13 flex-row justify-between">
                        <span class="text_65">&nbsp;</span>
                        <span class="text_66">&nbsp;</span>
                    </div>
                    <span class="text_67">&nbsp;～&nbsp;&nbsp;℃</span>
                </div>
                <span class="text_68">
                    <span
                        style="background: #FDB201;width: 15px;height: 15px;border-radius: 50%;display: inline-block;margin-right: 5px;"></span>
                    <span>高温黄色预警</span>
                </span>
            </div>

            <div class="block_12 flex-col">
                <div class="box_25 flex-row">
                    <img class="label_5" referrerpolicy="no-referrer"
                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng554c113ec339ff2aba5f91fa2e479d44dd3cb5e3cd0fa0d4b6ef8c60a3a613d7" />
                    <span class="text_72">体感</span> <span class="text_73">℃</span>
                </div>
                <img class="image_26" referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbb530eca8b3f0aa8a1fc776e05b9522727c0b35ffe9330810af619f456b97d44" />
                <div class="box_26 flex-row">
                    <img class="label_6" referrerpolicy="no-referrer"
                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7b545d4957fb09c3031619dd7a8df5d804485eb306fbe173987b43469f9a7c1e" />
                    <span class="text_74">风力</span>
                    <span class="text_75"></span>
                </div>
                <img class="image_27" referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbb530eca8b3f0aa8a1fc776e05b9522727c0b35ffe9330810af619f456b97d44" />
                <div class="box_27 flex-row justify-between">
                    <div class="image-text_3 flex-row justify-between">
                        <img class="label_7" referrerpolicy="no-referrer"
                            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng04a7b65c5e7c483941781aaec2491642e638d2497215c7ca51bdfeff50840b62" />
                        <span class="text-group_5">湿度</span>
                    </div>
                    <span class="text_76"></span>
                </div>
            </div>

            <div class="group_10 flex-row">
                <div class="group_11 flex-col justify-between">
                    <span class="text_80">&nbsp;～&nbsp;&nbsp;℃</span>
                    <div class="group_12 flex-row justify-between">
                        <span class="text_81">今天&nbsp;</span>
                        <div class="text-wrapper_18 flex-col">
                            <span class="text_82">&nbsp;&nbsp;</span>
                        </div>
                    </div>
                </div>
                <div class="group_13 flex-col justify-between">
                    <img class="label_8" referrerpolicy="no-referrer"
                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7c3a275375a6cad06eee2e7fc60c69615c6f2814d254ca5ed0a51068e88ac7bb" />
                    <span class="text_83">晴&nbsp;</span>
                </div>
                <img class="image_28" referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng106a7d690fc8299e015457380609c4f230aee289458e96829c0b6715ce4edb41" />
                <div class="group_14 flex-col justify-between">
                    <span class="text_84">&nbsp;～&nbsp;&nbsp;℃</span>
                    <div class="section_5 flex-row justify-between">
                        <span class="text_85">明天&nbsp;</span>
                        <div class="text-wrapper_19 flex-col">
                            <span class="text_86">&nbsp;&nbsp;</span>
                        </div>
                    </div>
                </div>
                <div class="image-text_4 flex-col justify-between">
                    <img class="label_9" referrerpolicy="no-referrer"
                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1a9ea52aec12086c2ae9431a281bfb7e4536e3edc70f8de526112e3edf026113" />
                    <span class="text-group_6">晴&nbsp;</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.le {
    width: 100%;
    height: 100%;
    //   padding: 100px 50px;
    padding-left: 140px;
}

.header {
    width: 75%;
    height: 8%;
    background: url("@/assets/image/左.png") no-repeat;
    background-size: 97% 100%;
    color: white;
    font-weight: 800;
    display: flex;
    align-items: center;
    padding-left: 30px;
    margin-top: 150px;
}

.body {
    width: 75%;
    height: 75%;
    margin-top: 30px;
    background-color: rgba(12, 29, 95, .8);
}

.block_8 {
    width: 380px;
    height: 70px;
    // background: pink;
    margin: 0px 0 0 30px;
    padding-top: 26px;
    display: flex;
    align-items: center;

    .text_64 {
        width: 111px;
        height: 36px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 48px;
        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
        font-weight: NaN;
        text-align: center;
        white-space: nowrap;
        line-height: 36px;
        margin-top: 5px;
    }

    .block_9 {
        width: 77px;
        height: 40px;
        margin: 1px 0 0 19px;

        .text-wrapper_13 {
            width: 50px;
            height: 16px;

            .text_65 {
                width: 20px;
                height: 15px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 12px;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 14px;
                margin-top: 1px;
            }

            .text_66 {
                width: 23px;
                height: 15px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 10px;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 14px;
                background: rgba(7, 169, 60, 1);
                border-radius: 20px;
                margin-left: 4px;
            }
        }

        .text_67 {
            width: 77px;
            height: 15px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 14px;
            margin-top: 9px;
        }
    }

    .text_68 {
        width: 74px;
        height: 15px;
        overflow-wrap: break-word;
        color: rgba(255, 237, 0, 1);
        font-size: 12px;
        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 14px;
        margin-left: 60px;
        margin-top: -25px;

        & span:nth-child(2) {
            // background: pink;
            position: relative;
            top: -8px;
        }
    }
}


.block_12 {
    position: absolute;
    left: 36px;
    top: 100px;
    width: 380px;
    height: 185px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngffee845e2adf0a43d20dfd22ea1f203fb02df46a550c1b6117ea93fed112ff81) 100% no-repeat;
    background-size: 100% 100%;

    .box_25 {
        width: 332px;
        height: 30px;
        margin: 10px 0 0 23px;
        display: flex;
        align-items: center;

        .label_5 {
            width: 24px;
            height: 24px;
            // margin-top: 7px;
        }

        .text_72 {
            width: 25px;
            height: 15px;
            overflow-wrap: break-word;
            color: rgba(194, 214, 255, 1);
            font-size: 12px;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 14px;
            // margin: 9px 0 0 18px;
        }

        .text_73 {
            width: 40px;
            height: 36px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 18px;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: NaN;
            text-align: right;
            line-height: 36px;
            margin-left: 245px;
        }
    }

    .image_26 {
        width: 334px;
        height: 1px;
        margin: 11px 0 0 24px;
    }

    .box_26 {
        width: 332px;
        height: 30px;
        margin: 10px 0 0 23px;
        display: flex;
        align-items: center;

        .label_6 {
            width: 24px;
            height: 24px;
            // margin-top: 8px;
        }

        .text_74 {
            width: 25px;
            height: 15px;
            overflow-wrap: break-word;
            color: rgba(194, 214, 255, 1);
            font-size: 12px;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 14px;
            margin: 8px 0 0 2px;
        }

        .text_75 {
            width: 85px;
            height: 36px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 18px;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: NaN;
            text-align: right;
            line-height: 36px;
            margin-left: 195px;
        }
    }

    .image_27 {
        width: 334px;
        height: 1px;
        margin: 9px 0 0 24px;
    }

    .box_27 {
        width: 332px;
        height: 30px;
        margin: 10px 0 5px 23px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .image-text_3 {
            width: 67px;
            height: 24px;
            // margin-top: 5px;
            display: flex;
            align-items: center;

            .label_7 {
                width: 24px;
                height: 24px;
            }

            .text-group_5 {
                width: 25px;
                height: 16px;
                overflow-wrap: break-word;
                color: rgba(194, 214, 255, 1);
                font-size: 12px;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 16px;
                margin-left: 2px;
            }
        }

        .text_76 {
            width: 39px;
            height: 36px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 18px;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: NaN;
            text-align: right;
            line-height: 36px;
        }
    }
}


.group_10 {
    position: absolute;
    left: 36px;
    top: 300px;
    width: 380px;
    height: 110px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga4b2dad1448249f99f33af84a80e4e44180f1f9d758ea83c0d1edd15ab4e9fb7) 100% no-repeat;
    background-size: 100% 100%;
    display: flex;

    .group_11 {
        width: 97px;
        height: 56px;
        margin: 27px 0 0 28px;

        .text_80 {
            width: 96px;
            height: 15px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 18px;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 14px;
            margin-left: 1px;
        }

        .group_12 {
            width: 91px;
            height: 18px;
            margin-top: 23px;
            display: flex;

            .text_81 {
                width: 46px;
                height: 15px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 18px;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 14px;
                margin-top: 1px;
            }

            .text-wrapper_18 {
                background-color: rgba(7, 169, 60, 1);
                border-radius: 9px;
                height: 18px;
                width: 50px;
                line-height: 18px;
                margin-left: 3px;

                .text_82 {
                    width: 27px;
                    height: 15px;
                    overflow-wrap: break-word;
                    color: rgba(255, 255, 255, 1);
                    font-size: 10px;
                    font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                    font-weight: NaN;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 14px;
                    margin: 0px 0 0 5px;
                }
            }
        }
    }

    .group_13 {
        width: 24px;
        height: 57px;
        margin: 22px 0 0 18px;
        display: flex;
        flex-direction: column;

        .label_8 {
            width: 24px;
            height: 24px;
        }

        .text_83 {
            width: 20px;
            height: 15px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 18px;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 14px;
            margin: 28px 0 0 3px;
        }
    }

    .image_28 {
        width: 1px;
        height: 69px;
        margin: 20px 0 0 22px;
    }

    .group_14 {
        width: 97px;
        height: 56px;
        margin: 27px 0 0 31px;

        .text_84 {
            width: 96px;
            height: 15px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 18px;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 14px;
            margin-left: 1px;
        }

        .section_5 {
            width: 91px;
            height: 18px;
            margin-top: 23px;
            display: flex;

            .text_85 {
                width: 46px;
                height: 15px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 18px;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 14px;
                margin-top: 1px;
            }

            .text-wrapper_19 {
                background-color: rgba(7, 169, 60, 1);
                border-radius: 9px;
                height: 18px;
                width: 45px;
                line-height: 18px;

                .text_86 {
                    width: 27px;
                    height: 15px;
                    overflow-wrap: break-word;
                    color: rgba(255, 255, 255, 1);
                    font-size: 10px;
                    font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                    font-weight: NaN;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 14px;
                    margin: 0px 0 0 5px;
                }
            }
        }
    }

    .image-text_4 {
        width: 24px;
        height: 57px;
        margin: 22px 16px 0 22px;
        display: flex;
        flex-direction: column;

        .label_9 {
            width: 24px;
            height: 24px;
        }

        .text-group_6 {
            width: 20px;
            height: 15px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 18px;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 14px;
            margin: 28px 0 0 4px;
        }
    }
}</style>